<template>
  <el-form-item :label="$t(label)" :prop="prop">
    <el-input
      v-model="inputValue"
      type="textarea"
      :rows="rows"
      :readonly="readonly"
      :style="styleObj"
      @input.native="updateValue"
    />
  </el-form-item>
</template>

<script>
export default {
  name: 'TextareaForm',
  props: {
    value: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    styleObj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    rows: {
      type: Number,
      default: 5
    },
    readonly: { // 是否只读 默认false
      type: Boolean,
      default: false
    },
    prop: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      inputValue: this.value
    }
  },
  watch: {
    value(val) {
      this.inputValue = val
    }
  },
  methods: {
    updateValue(event) {
      this.$emit('input', event.target.value)
    }
  }
}
</script>

<style scoped>

</style>
